<template>
  <div>
    <el-dialog title="点击表格行选择" :visible.sync="showTable" width="750px">
      <search :formItems="searchItems" @search="getList" ref="search"/>
      <div v-if="multiple">
        已勾选：
        <el-tag v-for="(item, index) in checks" :key="index" style="margin-right: 8px;margin-bottom: 8px;">{{ item.name }}</el-tag>
        <el-button type="primary" @click="setMultiple" size="mini">确认</el-button>
      </div>
      <el-table :data="datas" ref="table" style="width: 100%;" @row-click="selectRow" @select="checkRow" @select-all="checkAll">
        <el-table-column
          type="index"
          width="55">
        </el-table-column>
        <el-table-column
          type="selection"
          v-if="multiple"
          width="55">
        </el-table-column>
        <el-table-column
          v-for="(item, index) in tableItem"
          :key="index"
          :label="item.label"
          :width="item.width ? item.width : ''"
          align="center"
          :prop="item.prop">
          <template slot-scope="scope">
            <span v-if="item.type === undefined">{{ scope.row[item.prop] }}</span>
            <img v-else-if="item.type === 'img'" :src="scope.row[item.prop]" alt="" width="40">
            <span v-else-if="item.type === 'status'">{{ scope.row[item.prop] === item.keywords ? item.status1 : item.status2 }}</span>
            <span v-else-if="item.type === 'sex'">{{ scope.row.sex === '1' ? '男' : (scope.row.sex === '2' ? '女' : (scope.row.sex === '3' ? '未知' : '保密')) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pageNum"
          :page-sizes="[20, 50, 100]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'select-list',
  data () {
    return {
      showTable: false,
      page: {
        pageNum: 1,
        pageSize: 20,
        total: 0
      },
      datas: [],
      checks: [],
      checkIds: []
    }
  },
  methods: {
    getList () {
      let searchData = {}
      if (this.$refs['search']) {
        searchData = this.$refs['search'].search()
      }
      let params = {...searchData, page: this.page.pageNum, size: this.page.pageSize}
      this.axios.get(this.url, {params})
        .then(res => {
          if (res.data.status) {
            this.page.total = Number(res.data.data.count)
            this.datas = res.data.data.list
            if (this.multiple) {
              this.setChecks()
            }
          }
        })
    },
    handleSizeChange (e) {
      this.page.pageSize = e
      this.getList()
    },
    handleCurrentChange (e) {
      this.page.pageNum = e
      this.getList()
    },

    toShow () {
      this.showTable = true
      if (this.multiple) {
        this.checks = []
        this.multiple.list.forEach(item => {
          this.checks.push(JSON.parse(JSON.stringify(item)))
          this.checkIds.push(item.id)
        })
        this.setChecks()
      }
    },

    selectRow (row) {
      if (this.multiple) {
        return
      }
      if (row.delflag === '0' || row.delflag === undefined) {
        this.$emit('selectRow', row)
        this.showTable = false
      } else {
        this.$message.warning('不能选择已删除的')
      }
    },

    setMultiple () {
      this.$emit('getMultiple', this.checks)
      this.showTable = false
    },
    setChecks () {
      this.$nextTick(() => {
        this.datas.forEach(item => {
          if (this.checkIds.indexOf(item.id) !== -1) {
            this.$refs['table'].toggleRowSelection(item, true)
          }
        })
      })
    },

    // 内部维护方法，用于多选
    checkRow (selection, row) {
      if (selection.indexOf(row) === -1) {
        // 取消
        let index = this.checkIds.indexOf(row.id)
        this.checkIds.splice(index, 1)
        this.checks.splice(index, 1)
      } else {
        // 勾选
        this.checkIds.push(row.id)
        this.checks.push(row)
      }
    },
    checkAll (selection) {
      if (selection.length) {
        // 全选
        this.datas.forEach(item => {
          if (this.checkIds.indexOf(item.id) === -1) {
            this.checkIds.push(item.id)
            this.checks.push(item)
          }
        })
      } else {
        // 全部取消
        this.datas.forEach(item => {
          if (this.checkIds.indexOf(item.id) !== -1) {
            this.checkIds.splice(this.checkIds.indexOf(item.id), 1)
            this.checks.splice(this.checkIds.indexOf(item.id), 1)
          }
        })
      }
    },
    reset () {
      // console.log(this.$refs['table'])
      this.checkIds = []
      this.checks = []
      if (this.$refs['table']) {
        this.$refs['table'].clearSelection()
      }
    }
  },
  props: ['searchItems', 'url', 'tableItem', 'multiple'],
  created () {
    this.getList()
  }
}
</script>

<style scoped>

</style>
